<template>
 <view>
   <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF"
     left-icon="left" status-bar title="矿机" />
    <view class="list">
      <view class="card"  v-for="(item,index) in list" :key="index" >
        <view class="kuangjiimg" :style="{backgroundImage:'url('+ `${item.image}` +')'}"></view>
        <view class="kuangjiname">{{item.title}}</view>
        <view class="kuangjibox">
          <view class="boxitem4">
            <view class="boxitemtext1">价格</view>
            <view class="boxitemtext2">{{item.money}}</view>
          </view>
          <view class="boxitem4">
            <view class="boxitemtext1">周期</view>
            <view class="boxitemtext2">{{item.cycle}}</view>
          </view>
          <view class="boxitem4">
            <view class="boxitemtext1">总收益</view>
            <view class="boxitemtext2">{{item.income}}</view>
          </view>
          <view class="boxitem4">
            <view class="boxitemtext1">每人限购</view>
            <view class="boxitemtext2">{{item.limit}}个</view>
          </view>
        </view>
        <view class="kuangjibuy" @click="buyClick(item)">
          <text class="kuangjibuytext">购买</text>
        </view>
        <u-line-progress class="jindu" height="8" :percentage="item.jindu" activeColor="#DBAB2B"></u-line-progress>
      </view>
    </view>
    <!-- 弹窗 -->
    <u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
      <view>
        <view class="popup">
          <view class="kuangjibuyc">
            <text>{{content}}</text>
          </view>
          <view class="kuangjibuys" @click="yesBuy">
            <text class="kuangjibuytext">购买</text>
          </view>
        </view>
      </view>
    </u-popup>
 </view>
</template>

<script>
  import {
    getminerlist,minerbuyMiner
  } from '@/api/kuangji/index.js'
  export default {
    data() {
      return {
				list:[],
        show: false,
        // 弹窗
        id:'', // 矿机id
        content:'' // 矿机介绍
      }
    },
    onLoad() {
    	// 获取获取矿机列表
      this.getList()
    },
    methods: {
			// 获取抢购记录接口
			getList(){
				// 调用接口
				getminerlist({
				}).then(res => {
          this.list = res.data
				}).catch((e) => {
				  // console.log('这是adoptList的err==', e)
          // this.$refs.paging.complete(false);
				}) 
			},
      open() {
        // console.log('open');
      },
      close() {
        this.show = false
      },
      buyClick(item){
        this.show =true
        this.content = item.content
        this.id = item.id
      },
      yesBuy(){
        minerbuyMiner({
        	id:this.id
        }).then(res => {
          // 1成功2失败
          this.close()
          if(res.code = 2){
             this.$ui.toast(res.msg)
          }else{
            this.$ui.toast(res.msg)
          }
        }).catch((e) => {
        }) 
      }
    }
  }
</script>

<style lang="less" scoped>
  .list .card:first-child{
    margin-top: 40rpx;
  }
  .card{
    width: 710rpx;
    height: 237rpx;
    background: #FFFFFF;
    border-radius: 10rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    position: relative;
    .jindu {
      position: absolute;
      top: 212rpx;
      right: 54rpx;
      width: 238px;
    
    }
    .kuangjiimg{
      position: absolute;
      top:38rpx;
      left: 39rpx;
      width: 134rpx;
      height: 103rpx;
      // background-image: url('@/static/kuangji/img.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .kuangjiname{
      position: absolute;
      top:160rpx;
      left: 51rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #D6B55E;
    }
    .kuangjibox{
      width: 460rpx;
      height: 80rpx;
      position: absolute;
      top: 57rpx;
      left: 200rpx;
      display: flex;
      .boxitem4{
        width: 25%;
        .boxitemtext1{
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          text-align: center;
        }
        .boxitemtext2{
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
          text-align: center;
          margin-top: 1rpx;
        }
      }
    }
    .kuangjibuy{
      position: absolute;
      top:138rpx;
      left:226rpx;
      width: 432rpx;
      height: 59rpx;
      background: linear-gradient(45deg, #DBAB2B 0%, #E4B945 100%);
      border-radius: 30rpx;
      line-height: 59rpx;
      text-align: center;
      .kuangjibuytext{
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
      }
    }
  }
  // 弹窗
  .popup{
    min-height: 500rpx;
    position: relative;
    .kuangjibuyc{
      width: 432rpx;
      margin: 0 auto;
      margin-top: 20rpx;
    }
    .kuangjibuys{
      width: 432rpx;
      height: 59rpx;
      background: linear-gradient(45deg, #DBAB2B 0%, #E4B945 100%);
      border-radius: 30rpx;
      line-height: 59rpx;
      text-align: center;
      margin: 0 auto;
      margin-top: 50rpx;
      .kuangjibuytext{
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
      }
    }
  }
  
  
</style>